<template>
  <div id="app" >
      <el-input v-model="keyword" placeholder="请输入关键字" style="width:300px"></el-input>
      <el-input v-model="url" placeholder="请输入跳转路径" style="width:300px"></el-input>
    <el-button @click="getKeyList" type="primary" size="small">查询</el-button>&nbsp;&nbsp;
     <el-button @click="insertIssue" type="primary" size="small">添加</el-button>
      <el-button type="success" @click="exportData" icon="el-icon-download">导出</el-button>
       <el-upload
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="onSuccess"
          :on-error="onError"
          :disabled="importDataDisabled"
          style="display: inline-flex;margin-right: 8px"
          :action="action"
      >
      <el-button
            :disabled="importDataDisabled"
            type="success"
            :icon="importDataBtnIcon"
          >{{importDataBtnText}}</el-button>
      </el-upload>
    <el-table :data="tableData" border style="width: 80%" :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column fixed prop="id" label="关键字ID" :formatter="formatter3" sortable width="120"></el-table-column>
      <el-table-column prop="keyword" label="关键词"  width="120"></el-table-column>
      <el-table-column prop="url" label="跳转链接"  width="200"></el-table-column>
       <el-table-column prop="isHot" label="是否推荐"  width="120" :formatter="formatter"></el-table-column>
       <el-table-column prop="isDefault" label="是否默认"  width="120" :formatter="formatter2"></el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
           <el-button @click="upd(scope.row)" type="primary" size="small">编辑</el-button>
          <el-button @click="delClick(scope.row.id)" type="danger" size="small">删除</el-button> 
        </template>
      </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[1, 3, 6, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  

      <!-- 添加对话框 -->
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
  <el-form :model="form" :rules="rules">
     <el-form-item label="关键字"  prop="keyword">
      <el-input v-model="form.keyword" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="跳转路径"  >
      <el-input v-model="form.url" autocomplete="off" ></el-input>
    </el-form-item> 
    <el-form-item label="是否推荐">
          <el-select v-model="form.isHot" placeholder="请选择">
            <el-option v-for="bean in dongList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
          </el-select>
    </el-form-item>
    <el-form-item label="是否默认">
          <el-select v-model="form.isDefault" placeholder="请选择">
            <el-option v-for="bean in changList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
          </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addObject()">确 定</el-button>
  </div>
</el-dialog>

  <!-- 修改对话框 -->
    <el-dialog title="编辑" :visible.sync="updFlag">
  <el-form :model="form" :rules="rules">
      <el-input v-model="form.id" type="hidden" autocomplete="off"></el-input>
    <el-form-item label="关键字"  prop="keyword">
      <el-input v-model="form.keyword" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="跳转路径"  >
      <el-input v-model="form.url" autocomplete="off" ></el-input>
    </el-form-item> 
    <el-form-item label="是否推荐">
          <el-select v-model="form.isHot" placeholder="请选择">
            <el-option v-for="bean in dongList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
          </el-select>
    </el-form-item>
    <el-form-item label="是否默认">
          <el-select v-model="form.isDefault" placeholder="请选择">
            <el-option v-for="bean in changList" :label="bean.name" :key="bean.id" :value="bean.id"></el-option>
          </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="updFlag = false">取 消</el-button>
    <el-button type="primary" @click="UpdObject()">确 定</el-button>
  </div>
</el-dialog>
  </div>
</template>

<script>
export default {
  mounted() {
    this.getKeyList();
     this.action="http://localhost:9999/market/ecKeyword/upLoadExcel";
  },
  methods: {
      onSuccess(response, file, fileList) {
        console.log("导入成功:{}",response)
        this.importDataBtnText = "导入";
        this.importDataBtnIcon = "el-icon-upload2";
        this.importDataDisabled =false;
        this.getKeyList();

    },
    onError(response, file, fileList) {
        console.log("error----------------->:{}",response);
        alert(response.message);
        this.importDataBtnText = "导入";
         this.importDataBtnIcon = "el-icon-upload2";
         this.importDataDisabled =false;

    },
    beforeUpload(response, file, fileList) {
      this.importDataBtnText = "正在导入";
      this.importDataBtnIcon = "el-icon-loading";
      this.importDataDisabled = true;
            
    },
     exportData() {
      var url =
        "http://localhost:9999/market/ecKeyword/downLoadGoodsExcel?pageNo={pageNo}&pageSize={pageSize}";
      url = url.replace("{pageNo}", this.form.pageNo);
      url = url.replace("{pageSize}", this.form.pageSize);
      if (this.form.keyword) {
        url = url + "&keyword=" + this.form.keyword;
      }
      console.log("url:----------------------", url);
      window.open(url, "_parent");
    },
     formatter3(row, column) {
        return row.id;
      },
   formatter2(row) {
      if (row.isDefault != null) {
        if (row.isDefault == 0) {
          return "Yes";
        } else if (row.isDefault == 1) {
          return "No";
        }
      }
    },
      formatter(row) {
      if (row.isHot != null) {
        if (row.isHot == 0) {
          return "热门咯";
        } else if (row.isHot == 1) {
          return "很遗憾";
        }
      }
    },
    addObject(){
      var $this=this;
      this.axios({
        method: "post",
        url: "http://localhost:9999/market/ecKeyword/xujiabao/keyadd",
        data:this.form
      }).then(function(res) {
        if(res.data.code==200){
            alert("小主,你的添加成功了");
            $this.getKeyList();
            $this.dialogFormVisible=false;
        }else{
            alert("哎呦后台故障了");
        }
      }); 
    },
    insertIssue(){
        this.dialogFormVisible=true;
        for(var i in this.form){
        this.form[i]=null;
      }
    },
    UpdObject(){
      var $this=this;
      this.axios({
        method: "post",
        url:"http://localhost:9999/market/ecKeyword/xujiabao/keyUpd",
        data:this.form
      }).then(function(res) {
        if(res.data.code==200){
            alert("小主,你的修改成功了");
            $this.getKeyList();
            $this.updFlag=false;
        }else{
            alert("哎呦后台故障了");
        }
      }); 
    },
    upd(row){
      this.updFlag=true;
      this.form.id=row.id;
      this.form.keyword=row.keyword;
      this.form.url=row.url;
      this.form.isHot=row.isHot;
      this.form.isDefault=row.isDefault;
    },
    getKeyList() {
             this.form.pageNo = this.pageNo;
      this.form.pageSize = this.pageSize;
      var $this=this;
      this.axios({
        method: "GET",
        url: "http://localhost:9999/market/ecKeyword/xujiabao/keyList",
        params: this.form
      }).then(function(res) {
        $this.tableData = res.data.obj.list;
        $this.total=res.data.obj.total;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getKeyList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getKeyList();
    },
    delClick(row){
      var $this=this;
      this.axios({
        method:'post',
        url: "http://localhost:9999/market/ecKeyword/xujiabao/logicdel?id="+row,
      }).then(function(res){
          if(res.data.code==200){
              alert("删除成功");
              $this.getKeyList();
          }else{
            alert("删除有误");
          }
      })
    },
  },
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      updFlag:false,
      form: {
      },
      rules: {},
      formLabelWidth: "120px",
      keyword:'',
      url:'',
      rules: {
        question: [
          { keyword: true, trigger: "blur" ,message: "问题不能为空"},
          // { min: 1, max: 10, trigger: "blur" }
        ],
      },
      dongList: [
        { id: 0, name: "热门咯" },
        { id: 1, name: "很遗憾" },
      ],
      changList: [
        { id: 0, name: "Yes" },
        { id: 1, name: "No" },
      ],
       importDataDisabled: false,
      importDataBtnText: "导入",
      importDataBtnIcon: "el-icon-upload2",
      action:""
    };
  }
};
</script>

